<template>
  <page-detail>
    <div style="height: inherit; overflow: hidden">
      <img
        :src="placesPicUrl"
        style="
          width: calc(100% - 20px);
          height: 350px;
          margin: 10px 10px 0;
          display: block;
          border-radius: 8px;
          object-fit: cover;
        "
      />
      <div class="info-card">
        <div class="info-item">
          <van-icon name="shop" class="icon" />
          <span class="value name">{{ placesName }}</span>
        </div>
        <div class="info-item">
          <van-icon name="location" class="icon" />
          <span class="value">{{ placesAddress }}</span>
        </div>
        <div class="info-item">
          <van-icon name="phone" class="icon" />
          <a :href="'tel:' + placesPhone" class="value phone">{{
            placesPhone
          }}</a>
        </div>
      </div>
    </div>
    <van-button
      type="primary"
      text="我要咨询"
      round
      style="
        width: 200px;
        position: fixed;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
      "
      @click="submit"
    ></van-button>
  </page-detail>
</template>

<script>
export default {
  name: 'wx_pages_zhfw_serviceAgedDetail',
  data() {
    return {
      placesPicUrl: '',
      placesPhone: '',
      placesName: '',
      placesAddress: '',
    }
  },
  methods: {
    submit() {
      this.$toPage(`/pages/consult/consultIm?receiver=${this.placesPhone}`)
    },
  },
  onLoad(query) {
    this.placesPicUrl = query.placesPicUrl
    this.placesPhone = query.placesPhone
    this.placesName = query.placesName
    this.placesAddress = query.placesAddr
  },
}
</script>

<style scoped>
.info-card {
  padding: 20px;
  background: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.icon {
  color: #1989fa;
  margin-right: 12px;
  font-size: 24px;
}

.value {
  color: #333;
  flex: 1;
  font-size: 16px;
}

.phone {
  color: #1989fa;
  text-decoration: underline;
}

.name {
  color: #1989fa;
  font-size: 18px;
  font-weight: 500;
}
</style>
